<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <form class="form" action="" onsubmit="return false"> -->
    <form class="form" action="">
        <p>
            <label for="">用户名:</label>
            <input type="text" id="user">
            <span id="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" id="pwd">
            <span id="pwd_span"></span>
        </p>
        <p>
            <!-- select>option*22{20$$}[value='20$$'] -->
            <select id="year">
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
<script>
    // 表单相关的事件
    // onfocus  表单控件聚焦时触发
    // onblur   表单控件失焦时触发
    // onchange  表单控件内容改变时触发
    //       1. 内容发生改变 + 失焦(回车)   => input textarea
    //       2. 下拉框选项切换时 => 直接触发

    // oninput   表单控件内容改变时触发(即时输入)

    // onsubmit  表单提交时触发 (绑定给form,由提交按钮(input:submit  button)触发)
    // onreset   表单重置时触发 (绑定给form,由重置按钮(input:reset)触发)

    var userInp = document.getElementById("user");
    var yearSel = document.getElementById("year");
    var form = document.getElementsByTagName("form")[0];

    // userInp.onfocus = function () {
    //     console.log("聚焦时触发");
    //     this.style.backgroundColor = "pink";
    //     this.value = "";
    // }
    // userInp.onblur = function () {
    //     console.log("失焦时触发");
    //     this.style.backgroundColor = "transparent";
    //     var con = this.value; // "   a123123   "
    //     con = con.trim();
    //     this.value = con;
    // }

    // userInp.onchange = function () {
    //     console.log("内容改变时触发");
    //     var con = this.value; // "   a123123   "
    //     con = con.trim();
    //     this.value = con;
    // }

    // userInp.oninput = function () {
    //     console.log("内容改变时触发");
    //     var con = this.value; // "   a123123   "
    //     con = con.trim();
    //     this.value = con;
    // }

    // yearSel.onchange = function () {
    //     console.log(this.value);
    // }


    form.onsubmit = function () {
        console.log("表单提交数据");
        return false; // 阻止浏览器的默认行为  => 阻止表单默认提交
    }

    form.onreset = function () {
        console.log("表单重置数据");
    }








</script>


</html>